<template>
  <div style="background-color: #f5f5f5;">
    <NavBar title="填写订单"/>

    <!-- 选择收货地址 -->
    <div class="item">
      <van-contact-card type="add" @click="onAdd" add-text="选择收货地址" v-if="addrshow"/>
      <van-contact-card
        v-else
        type="edit"
        :name="currentContact.name"
        :tel="currentContact.tel"
        @click="onEdit"
      />
    </div>

    <!-- 送达时间和订单列表 -->
    <div class="item">
      <van-cell title="送达时间" is-link @click="handleClick">
        <div slot="default">{{this.currentDate | timeformat}}</div>
      </van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          title="选择完整时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirm"
        />
      </van-popup>
      <van-cell-group @click="orderClick">
        <van-cell is-link>
          <div class="orderList" slot="title" v-for="(item,index) in orderList">
            <img :src="item.small_image" >
          </div>
          <div slot="default">
            共{{this.orderList.length}}件
          </div>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 支付方式 -->
    <div class="item">
      <van-cell-group>
        <van-cell title="支付方式" value="微信" />
      </van-cell-group>
    </div>

    <!-- 备注 -->
    <div class="item">
      <van-cell-group>
        <van-cell title="备注" >
          <div slot="default" class="note">
            <input type="text" placeholder="选填,备注您的特殊需求"/>
          </div>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 商品金额 配送费 -->
    <div class="item">
      <van-cell-group>
        <van-cell title="商品金额">
          <div slot="default">
            ￥{{totalPrice}}
          </div>
        </van-cell>
      </van-cell-group>
      <van-cell-group>
        <van-cell title="配送费" value="￥0" />
      </van-cell-group>
    </div>


    <!-- 提交订单 -->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
  import NavBar from '@/components/navBar'
  import filters from '@/utils/filter'
  import { mapGetters } from 'vuex'
  import { getCartList } from '@/api/cart'
  import np from 'number-precision'
  export default{
    filters,
    name:'ConfirmOrder',
    computed: {
      ...mapGetters(['getUserInfo']),
      // 总价
      totalPrice(val){
       let sum = 0
       this.orderList.forEach((item) => {
          // sum += item.goods_price * item.num
          sum = np.plus(sum,np.times( item.goods_price,item.num))

       })
       return sum
      }
    },
    components:{
      NavBar
    },
    data() {
      return {
        show:false,
        addrshow:true,
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        currentContact: {
          name: '张三',
          tel: '13000000000',
        },
        orderList:[],
      }
    },
    mounted() {
      this.getCartList()
    },
    props:['NavBar'],
    methods:{
      handleClick() {
        this.show = true
      },
      onAdd() {
        this.$router.push('/confirmorder/address')
      },
      onEdit() {

      },
      confirm() {
        this.show = false
      },
      async getCartList (){
        const {data} = await getCartList(this.getUserInfo.token)

        console.log(data.data[0].checked)

        this.orderList = data.data
      },

      // 提交订单
      onSubmit() {

      },

      orderClick() {
        this.$router.push('/confirmorder/orderdetails')
      }
    }
  }
</script>

<style scoped="scoped">
  .note input{
    text-align: right;
    border: 0;
  }

  .orderList{
    display: inline-block;
  }
  .orderList img{
    width: 100px;
    height: 100px;
  }

  .item{
    margin-top: 25px;
  }
</style>
